{% extends "sentry/bases/auth.html" %}

{% load crispy_forms_tags %}
{% load i18n %}
{% load sentry_assets %}

{% block scripts %}
{{ block.super }}

<script>
  (function() {
    var SRC = "{% asset_url 'sentry' 'dist/pwstrength.js' %}";

    var async_load = function() {
      var first, s;
      s = document.createElement('script');
      s.src = SRC;
      s.type = 'text/javascript';
      s.async = true;
      s.addEventListener('load', function() {
        if (window.sentrypw) {
          window.sentrypw.addStrengthIndicator(
            '#register #id_password',
            '.password-strength',
          );
        }
      }, false);
      first = document.getElementsByTagName('script')[0];
      return first.parentNode.insertBefore(s, first);
    };

    window.addEventListener('load', async_load, false);
  })();
</script>

{% endblock %}


{% block title %}{% trans "Login" %} | {{ block.super }}{% endblock %}

{% block auth_main %}
<div style="padding-bottom: 10px">
  <div class="align-center">
    <img src="{% asset_url "sentry" "images/default-organization-logo.png" %}" class="org-avatar">

    <h3>{{ organization.name }}</h3>
  </div>

  {% if provider_name %}
    <form class="form-stacked" action="" method="post" autocomplete="off">
      {% csrf_token %}

      <div class="align-center">
        <p>Sign in with your {{ provider_name }} account to continue.</p>

        <p><button type="submit" class="btn btn-default btn-login-{{ provider_key }}">
          <span class="provider-logo {{ provider_name | lower}}"></span> Login with {{ provider_name }}
        </button></p>
      </div>
    </form>
  {% else %}
    <ul class="nav nav-tabs auth-toggle">
      <li{% if op == "login" %} class="active"{% endif %}>
        <a href="#login" data-toggle="tab">{% trans "Login" %}</a>
      </li>
      {% if CAN_REGISTER %}
        <li{% if op == "register" %} class="active"{% endif %}>
          <a href="#register" data-toggle="tab">{% trans "Register" %}</a>
        </li>
      {% endif %}
    </ul>

    <div class="tab-content basic-login">
      <div class="tab-pane{% if op == "login" %} active{% endif %}" id="login">
        <form class="form-stacked" action="" method="post" autocomplete="off">
          {% csrf_token %}

          <input type="hidden" name="op" value="login" />

          {{ login_form|as_crispy_errors }}

          {% for field in login_form %}
            {{ field|as_crispy_field }}
          {% endfor %}

          <fieldset class="form-actions">
            <button type="submit" class="btn btn-primary">{% trans "Login" %}</button> <a class="pull-right" style="margin-top: 9px" href="{% url 'sentry-account-recover' %}">{% trans "Lost your password?" %}</a>
          </fieldset>
        </form>
      </div>
      <div class="tab-pane{% if op == "register" %} active{% endif %}" id="register">
        <form class="form-stacked" action="" method="post" autocomplete="off">
          {% csrf_token %}

          <input type="hidden" name="op" value="register" />

          {{ register_form|as_crispy_errors }}

          {% for field in register_form %}
            {{ field|as_crispy_field }}
          {% endfor %}

          <div class="password-strength"></div>

          <fieldset class="form-actions">
            <button type="submit" class="btn btn-primary">{% trans "Register" %}</button>
          </fieldset>
        </form>
      </div>
    </div>
  {% endif %}
</div>
{% endblock %}
